<template>
	<view class="ListOfRecommended">
		<view class="LORtop">
			<view class="LORtab">
				<view class="LORtaba LORtabb">
					推荐榜
				</view>
				<view class="LORtaba">
					完本榜
				</view>
				<view class="LORtaba">
					人气榜
				</view>
			</view>
			<view class="LORtapr">
				完整榜单
			</view>
		</view>
		<view class="LORmun">
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view class="scroll-view-item_H" v-for="( recomm, index) in recommendedList.recommended" :key="index"  @click="recommendedClassify(index)">{{ recomm.name }}</view>
			</scroll-view>
<!-- 			<view v-for="( recomm, index) in recommendedList.recommended">
					<view class="LORmunLi" @click="recommendedClassify(index)"> {{recomm.name}} </view>
			</view> -->
		</view>
		<scroll-view scroll-x="true" class="LORlis">
			<view class="LORli">
				<view class="LORbook" v-for="(book , index) in bookList.book" @click="booksPage(book.id)">
					<view class="LORbookImg" @click="booksPage(book.id)">
						<img :src="book.imgUrl" alt="">
					</view>
					<view class="LORbookNumb">
						{{ index + 1 }}
					</view>
					<view class="LORbookCen">
						<view class="LORbookCenTit">
							{{ book.name }}
						</view>
						<view class="LORbookCenAuthor">
							{{ book.authorName }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	import recommended from '@/assets/json/classify/recommended.json'
	import books from '@/assets/json/book/books.json'
	export default {
		data() {
			return {
				recommendedList: recommended,
				bookList: books,
				disableTouch: false, //是否禁止用户 touch 操作
				indicatorDots: false, //是否显示面板指示点
				autoplay: false, //是否自动切换
				vertical: false, //滑动方向是否为纵向
				interval: 50000, //自动切换时间间隔
				duration: 200, //滑动动画时长
				currentIndex: 0, //当前索引
			}
		},
		onLoad() {
	
		},
		methods: {
			recommendedClassify(e){
				console.log(e)
			},
			booksPage(e){
				this.$emit('booksPage',e)
			}
		}
	}
</script>

<style lang="less">
	.ListOfRecommended{
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 4vw;
		margin-top: 2vw;
		border-radius: 10px;
		.LORtop{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.LORtab{
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
				align-content: flex-end;
				.LORtaba{
					font-size: 4.1vw;
					font-weight: bold;
					color: #949494;
					margin-right: 3vw;
				}
				.LORtabb{
					font-size: 4.5vw;
					color: #000000;
				}
			}
			.LORtapr{
				font-size: 4vw;
				font-weight: bold;
				color: #000000;
				position: relative;
				margin-right: 2vw;
			}
			.LORtapr::after{
				content: ' ';
				width: 5px;
				height: 5px;
				border-top: 2px #000000 solid;
				border-right: 2px #000000 solid;
				position: absolute;
				right: -2vw;
				top: 2vw;
				transform:rotate(45deg);
				
			}
		}
		.LORmun{
			width: 84vw;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			align-items: center;
			margin-top: 4vw;
			height: 8vw;
			overflow-x: scroll;
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}
			.scroll-view-item_H {
				display: inline-block;
				padding: 0.5vw 3vw;
				height: 8vw;
				line-height: 8vw;
				margin-right: 3vw;
				text-align: center;
				font-size: 3.8vw;
				border-radius: 4vw;
				background-color: #f0f0f0;
			}
			.scroll-view_H::-webkit-scrollbar {
			  width: 0px;
			  height: 0px;
			  background-color: rgba(0, 0, 0, 0);
			}
			
			.scroll-view_H::-webkit-scrollbar-track {
			  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
			  border-radius: 10px;
			  background-color: rgba(0, 0, 0, 0);
			}
			
			.scroll-view_H::-webkit-scrollbar-thumb {
			  border-radius: 10px;
			  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
			  background-color: rgba(0, 0, 0, 0);
			}
			
			
			// .LORmunLi{
			// 	width: 15vw;
			// 	height: 8vw;
			// 	margin-right: 3vw;
			// 	text-align: center;
			// 	line-height: 8vw;
			// 	font-size: 3.8vw;
			// 	border-radius: 4vw;
			// 	background-color: #f0f0f0;
			// }
			
		}
		.LORlis{
			white-space: nowrap;
			width: 100%;
			.LORli{
				height: 80vw;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				flex-wrap: wrap;
				margin-right: 3vw;
				.LORbook{
					width: 56vw;
					display: flex;
					justify-content: flex-start;
					margin-top: 3.2vw;
					.LORbookImg{
						img{
							width: 11vw;
							height: 15vw;
						}
					}
					.LORbookNumb{
						margin-left: 2vw;
						font-size: 4vw;
						color: #aba87f;
						margin-top: 1vw;
					}
					.LORbookCen{
						margin-left: 2vw;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.LORbookCenTit{
							width: 36vw;
							font-size: 3.8vw;
							font-weight: 400;
							color: #000000;
							margin-top: 1vw;
							overflow: hidden;            // 溢出隐藏
							text-overflow: ellipsis;     // 溢出用省略号显示
							display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
							-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
							-webkit-line-clamp:2;        // 显示的行数
						}
						.LORbookCenAuthor{
							width: 36vw;
							color: #c4b58a;
							font-size: 3.2vw;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
		.LORlis::-webkit-scrollbar {
		  width: 0px;
		  height: 0px;
		  background-color: rgba(0, 0, 0, 0);
		}
		
		.LORlis::-webkit-scrollbar-track {
		  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
		  border-radius: 10px;
		  background-color: rgba(0, 0, 0, 0);
		}
		
		.LORlis::-webkit-scrollbar-thumb {
		  border-radius: 10px;
		  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
		  background-color: rgba(0, 0, 0, 0);
		}
	}
	.ListOfRecommended::-webkit-scrollbar {
	  width: 0px;
	  height: 0px;
	  background-color: rgba(0, 0, 0, 0);
	}
	
	.ListOfRecommended::-webkit-scrollbar-track {
	  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
	  border-radius: 10px;
	  background-color: rgba(0, 0, 0, 0);
	}
	
	.ListOfRecommended::-webkit-scrollbar-thumb {
	  border-radius: 10px;
	  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0);
	  background-color: rgba(0, 0, 0, 0);
	}
</style>